<template>
  <div class="app-container" v-loading="loading">
    <el-form
        ref="queryRef"
        :inline="true"
        :model="queryParams"
        class="form-box"
    >
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.purchaseCode"
                clearable
                placeholder="采购单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                style="width:100%"
                clearable
                placeholder="单据状态"
                v-model="queryParams.status"
            >
              <template v-for="(item,index) in b2b_purchase_status" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="queryParams.warehouseId" style="width: 100%" clearable placeholder="仓库">
              <el-option
                  v-for="item in warehouseList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.vendorName"
                clearable
                placeholder="供应商名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.delivery"
                clearable
                placeholder="配送方式"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.shipmentByName"
                clearable
                placeholder="发货人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.shipmentPhone" @input="queryParams.shipmentPhone=limitIntNumber(queryParams.shipmentPhone)" :maxlength="11" placeholder="联系方式" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item class="picker">
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"

                unlink-panels
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>

    <div>
      <el-button
          icon="Plus"
          type="primary"
          @click="handleAdd"
          v-hasPermi="['purchase:b2b:save']"
      >新建采购申请单
      </el-button>
      <el-button
          type="primary"
          icon="Download"
      >导出
      </el-button>
    </div>
    <vxe-table
        style="margin-top: 10px"
        :data="tableData"
        :height="tableHeight"
        align="center"
        border
        :checkbox-config="{ trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="60" title="序号"></vxe-column>
      <vxe-column field="status" width="100" title="单据状态">
        <template v-slot="{row}">
          {{ returnDictLabel(b2b_purchase_status, row.status) }}
        </template>
      </vxe-column>
      <vxe-column field="purchaseCode" width="220" title="采购单号">
      </vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="采购仓库"></vxe-column>
      <vxe-column field="vendorName" width="120" title="供应商名称"></vxe-column>
      <vxe-column field="vendorCode" width="120" title="供应商编码"></vxe-column>
      <vxe-column field="delivery" width="120" title="配送方式"></vxe-column>
      <vxe-column field="totalNum" width="120" title="总采购数量"></vxe-column>
      <vxe-column field="receiptNum" width="120" title="已收货数量"></vxe-column>
      <vxe-column field="qcPassNum" width="120" title="质检正品数量"></vxe-column>
      <vxe-column field="totalMoney" width="100" title="总采购金额"></vxe-column>
      <vxe-column field="shipmentByName" width="100" title="发货人"></vxe-column>
      <vxe-column field="shipmentPhone" width="120" title="手机号"></vxe-column>
      <vxe-column field="shipmentAddress" width="220" title="发货地址"></vxe-column>
      <vxe-column field="createByName" width="120" title="创建人"></vxe-column>
      <vxe-column field="createTime" width="150" title="创建时间"></vxe-column>
      <vxe-column fixed="right" title="操作" width="140">
        <template #default="{row}">
          <el-button v-if="row.status=='0'" type="text" @click="clickEdit(row)">编辑</el-button>
          <el-button type="text" style="color:green" @click="clickView(row)">查看</el-button>
          <el-button v-if="row.status=='0'" type="text" style="color:red" @click="handleDelete(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />
    <!--    新增采购单-->
    <EditB2bPurchase v-if="isShowDialog" :isShowDialog="isShowDialog" :title="title" :isView="isView"
                     :warehouseList="warehouseList" :detailData="detailData"
                     @cancel="handleClose"></EditB2bPurchase>
  </div>
</template>

<script setup>
import {onMounted, ref, nextTick, getCurrentInstance} from "vue";
import EditB2bPurchase from "@/views/procure/B2bPurchase/componet/editB2bPurchase.vue";
import {
  b2bPurchaseHeaderDelete,
  getB2bPurchaseHeaderDetail,
  getB2bPurchaseHeaderList,
  warehouseGetFilter
} from "@/api/scApi";

const {proxy} = getCurrentInstance();
 const { b2b_purchase_status } = proxy.useDict("b2b_purchase_status");

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})

const title = ref('')
const tableData = ref([])
const total = ref(1)
let isView = ref(false)
let timeData = ref([])
let loading=ref(false)
const resetQuery = () => {
  timeData.value=[]
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    startTime: '',
    endTime: ''
  }
  getList();
};

function getList() {
  loading.value=true
  queryParams.value.startTime = timeData.value[0]
  queryParams.value.endTime = timeData.value[1]

  getB2bPurchaseHeaderList({
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }).then(res => {
    loading.value= false
    tableData.value = res.data
    total.value = res.total
  }).finally(()=>{
    loading.value = false
  })
}

//新增按钮
let isShowDialog = ref(false)

function handleAdd() {
  isShowDialog.value = true;
  title.value = "新增采购订单";
}

function handleClose(isReload) {
  isShowDialog.value = false;
  isView.value=false
  detailData.value={}
  if (isReload) {
    getList()
  }
}

// 编辑按钮
async function clickEdit(row) {
  title.value = "编辑采购订单";
  getDetailData(row.purchaseId)
}

function clickView(row) {
  title.value = "查看采购订单"
  isView.value = true
  getDetailData(row.purchaseId)
}

function handleDelete(row) {
  deleteData([row.purchaseId])
}

function deleteData(ids) {
  if (!ids || ids.length === 0) {
    return
  }
  proxy.$modal.confirm('是否确认删除该数据？').then(() => {
    b2bPurchaseHeaderDelete({ids: ids}).then(res => {
      if (res.code === 200) {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      }
    })
  }).catch(() => {
  });
}

let detailData = ref({}) //当前行详情数据
function getDetailData(id) {
  getB2bPurchaseHeaderDetail(id).then(res => {
    if (res.code === 200) {
      detailData.value = res.data
      isShowDialog.value = true
    }
  })
}

let tableHeight = ref(0);
onMounted(() => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 380;
  })
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 380;
  }
  getWarehouseFilter()
  getList()
})

let warehouseList = ref([])
//获取仓库
function getWarehouseFilter() {
  warehouseGetFilter({
    status: 0
  }).then(res => {
    if (res.code === 200) {
      warehouseList.value = res.data.map(item => {
        item.value = item.warehouseId
        item.label = item.warehouseName
        return item
      })

    }
  })
}

</script>

<style scoped lang="scss">
.el-form {
  .btns {
    width: auto !important;
  }

  .el-form-item {
    float: left;
  }

  .status {
    :deep(.el-form-item__content) {
      .el-select--default {
        max-width: 124px;
        margin-right: 10px;
      }
    }
  }

  .btns {
    :deep(.el-form-item__content) {
      margin-right: 0px !important;
      display: flex;
      justify-content: space-between;
    }
  }
}

</style>